import React, {
    PureComponent
} from 'react';

import {
    View,
    StyleSheet
} from 'react-native';

import {
    Tip,
    Layout,
    Select,
    Button,
    Loading
} from './../../../components';

import {
    Actions
} from 'react-native-router-flux';

import Options from './../../../const/options';

import Connect from './../../../utils/connect';

import * as userTypes from './../../../state/types/user';

import userAction from './../../../state/actions/user';

interface Props {
    user: any,
    userActions: any
}

interface State {
    height: any,
    body: any
}

const getVal = (item: any) => {
    item = item || {};
    return item.id || 0;
}

const nativeVal = (a: any, b: any) => {
    return (a !== undefined ? a : b) || 0;
}

@Connect([`user`], {
    userActions: userAction
})
class General extends PureComponent<Props, State> {

    static defaultProps = {
        user: {},
        userActions: {}
    }

    state = {
        body: undefined,
        height: undefined,
        education: undefined,
        ethnicity: undefined,
        hobbies: undefined,
        personality: undefined
    }

    get userState() {
        const {
            user
        } = this.props;
        return user;
    }

    get loginUser() {
        const {
            loginUser
        } = this.userState;
        return loginUser;
    }

    get Data() {
        return this.loginUser;
    }

    get items() {
        return [
            {
                name: `Height`,
                filed: `height`,
                options: Options.height
            },
            {
                name: `Body type`,
                filed: `body`,
                options: Options.body
            },
            {
                name: `Ethnicity`,
                filed: `ethnicity`,
                options: Options.ethnicity
            },
            {
                name: `Education`,
                filed: `education`,
                options: Options.education
            },
            {
                name: `Occupation`,
                filed: `occupation`,
                options: Options.occupation
            },
            {
                name: `Annual income`,
                filed: `income`,
                options: Options.income
            }
        ]
    }

    get userActions() {
        const {
            userActions
        } = this.props;
        return userActions || {}
    }

    get hobbies() {
        const {
            hobbies
        } = this.Data;
        return (hobbies || []).map(
            (item: any) => item.id || 0
        );
    }

    get personality() {
        const {
            personality
        } = this.Data;
        return (personality || []).map(
            (item: any) => item.id || 0
        );
    }

    get hobbiesVal() {
        const {
            hobbies
        } = this.state;
        return nativeVal(
            hobbies,
            this.hobbies
        )
    }

    get personalityVal() {
        const {
            personality
        } = this.state;
        return nativeVal(
            personality,
            this.personality
        )
    }

    get params() {
        const {
            state
        } = this;
        const para: any = {};
        const keys = Object.keys(state).filter(
            (key:any) => !!state[key as never]
        )
        keys.forEach((key: any) => {
            para[key as never] = state[key as never];
        })
        return para;
    }

    get disabled() {
        const {
            length
        } = Object.keys(this.params);
        return length <= 0;
    }

    private getItemVal = (filed: never) => {
        const propVal = this.Data[filed];
        const stateVal = this.state[filed];
        return nativeVal(stateVal, getVal(propVal));
    }

    private onItemChange = (val: any, type: string) => {
        this.setState({[type]: val} as any);
    }

    private renderItem = (item: any, i: number) => {
        const {
            name,
            filed,
            options
        } = item as any;
        return (
            <Select
                key={i}
                type={filed}
                options={options}
                placeholder={name}
                onChange={this.onItemChange}
                value={this.getItemVal(filed as never)}
            />
        )
    }

    private onSuccess = () => {
        Actions.pop()
        Tip.success({
            message:`Save successfully.`
        })
    }

    private onSubmit = async () => {
        Loading.show();
        try {
            await this.userActions[
                userTypes.setUserProfile
            ](this.params);
            this.onSuccess();
        }
        catch (e) {
            Tip.warm({
                message: e.message
            })
        }
        Loading.close();
    }

    render() {
        return (
            <Layout title="About me" padding={false}>
                <View style={styles.itemView}>
                    {this.items.map(this.renderItem)}

                </View>
                <View style={styles.itemView}>
                    <Select
                        type="personality"
                        value={this.personalityVal}
                        placeholder="My personality"
                        options={Options.personality}
                        onChange={this.onItemChange}
                    />
                    <Select
                        type="hobbies"
                        value={this.hobbiesVal}
                        placeholder="My interests"
                        options={Options.hobbies}
                        onChange={this.onItemChange}
                    />
                </View>
                <View style={styles.saveStyle}>
                    <Button
                        title="Save"
                        disabled={this.disabled}
                        onPress={this.onSubmit}
                    />
                </View>
            </Layout>
        )
    }
}

export default General;

const styles = StyleSheet.create({
    itemRow: {
        marginBottom: 1
    },
    saveStyle: {
        paddingHorizontal: 16,
        paddingVertical: 36
    },
    itemView: {
        marginBottom: 13
    }
}) as any;